<template>
	<view class="content">
		<Search />
		<view class="big_view">
			<scroll-view scroll-y="true" class="left">
				<view class="left_column" :class="index==column_index ? 'nav' : '' "
					v-for="(item,index) in column" :key="item.cat_id"
					@click="cut_column(index)"
					>
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view class="" v-for="item in column[column_index].arr" :key="item.cat_id">
					<view class="title_">
						{{item.cat_name}}
					</view>
					<view class="right_commodity_one">
						<navigator class="right_commodity" v-for="item1 in item.children" :key="item1.cat_id" 
							:url="'../goods_list/index?id=' +item1.cat_id" >
							<image :src="item1.cat_icon" mode=""></image>
							{{item1.cat_name}}
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Search from '../../components/search/search.vue'
	export default {
		components: {
			Search,
		},
		data() {
			return {
				column: [],
				column_index: 0,
			}
		},
		onLoad() {
			let data = uni.getStorageSync('kye_column')
			if(!data){
				this.get_column()
			}else {
				let time = +new Date()
				let former = data.pop().storage_time
				if(former - time > 1){
					console.log('数据未过期')
					this.column = data
				}else {
					this.get_column()
				}
			}
			
		},
		methods: {
			 get_column () {
				 uni.request({
				 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'
				 }).then(res=>{
					 this.column = res[1].data.message.map(v=>{
						 return {
							 cat_name: v.cat_name,
							 cat_id: v.cat_id,
							 arr: v.children
						 }
					 })
					 this.column.push({storage_time: +new Date + (30 * 60 * 1000)})
					uni.setStorageSync("kye_column",this.column)
				 })
			 },
			 cut_column (index) {
				 this.column_index = index
			 }
		}
	}
</script>

<style lang="less" scoped>
.content {
	.big_view {
		display: flex;
		flex-shrink: 0;
		.left {
			width: 182rpx;
			height: calc(100vh - 100rpx);
			background: #f3f3f3;
			.left_column {
				text-align: center;
				padding: 16rpx 0;
				font-size: 30rpx;
				&.nav {
					color: #da2672;
					font-weight: bold;
					position: relative;
					&::before {
						content: "|";
						position: absolute;
						font-weight: 1000;
						left: 0;
					}
				}
			}
		}
		.right {
			flex: 1;
			height: calc(100vh - 100rpx);
			flex-shrink: 0;
			.title_ {
				font-size: 32rpx;
				padding: 20rpx 0 10rpx;
				text-align: center;
				&::before,&::after {
					content: "/";
					margin: 0 10rpx;
				}
			}
			.right_commodity_one {
				display: flex;
				flex-wrap: wrap;
				.right_commodity {
					width: 33.33%;
					font-size: 28rpx;
					padding: 10rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					image {
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
		}
	}
}
</style>
